<script setup lang="ts">
import { onMounted, ref } from 'vue';
import LeftBar from '../components/LeftBar.vue';
import * as THREE from 'three';

const homeContainerRef = ref(null);

const initScene = () => {
  // 场景
  const scene = new THREE.Scene();
  // 相机(视野角度、长宽比、近截面、远截面)
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  // 渲染器
  const renderer = new THREE.WebGLRenderer();
  // 将渲染器的dom添加到html文档中
  renderer.setSize(window.innerWidth, window.innerHeight);
  homeContainerRef.value.appendChild(renderer.domElement);
  // document.body.appendChild(renderer.domElement);
  // 添加立方体
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  // 材质（使得立方体有颜色）
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  console.log('homeContainerRef', homeContainerRef.value)
  // 必须要设置position.z，否则立方体看不见，原因？？？
  camera.position.z = 5;
  console.log("🚀 ~ initScene ~ camera.position.z:", camera.position.z)

  // 渲染场景
  const animate = () => {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  animate();
}

onMounted(() => {
  initScene()
})

</script>
<template>
  <div class="container" ref="homeContainerRef">
    <!-- <LeftBar /> -->
    <!-- <div>首页内容</div> -->
  </div>
</template>


<style lang='scss' scoped>
    .container {
        width: 100%;
        height: 100%;
        display: flex;
        background: #fff;
    }
</style>